/**
 * 商品详情，购买商品界面的js
 */


//倒计时放到这里面呢
var timeLeft = 60000;
var countdown = setInterval(function () {
    console.log('timeLeft', timeLeft);
    var startMinutes = parseInt(timeLeft / (60 * 1000), 10);
    var startSec = parseInt((timeLeft - startMinutes * 60 * 1000) / 1000);
    $$('.order-countdown').text("倒计时：" + startMinutes + "分钟" + startSec + "秒");
    if (timeLeft <= 0) { //这里就是时间到了之后应该执行的动作了，这里只是弹了一个警告框
        clearInterval(countdown);
    } else {
        timeLeft = timeLeft - 1000;
    }
}, 1000);

/**
 * 取消倒计时
 */
myApp.onPageBeforeRemove('goods-detail', function () {
    clearInterval(countdown);
});

$(function () {

    $$('.open-info').on('click', function () {
        myApp.pickerModal('.picker-info')
    });

    $$('.btn-decrease').on('click', function () {
        var number = $$('#goods_number').val();
        console.log('decrease: ', number);
        if (number > 1) {
            $$('#goods_number').val(number - 1)
        }
        if (parseInt(number) === 2) {
            $$('.btn-decrease').removeClass('active')
        }
    });

    $$('.btn-add').on('click', function () {
        console.log('add: ');
        var number = $$('#goods_number').val();
        $$('#goods_number').val(parseInt(number) + 1);
        $$('.btn-decrease').addClass('active');
    });


    /**
     * 选择时间弹出后，初始化日历控件，和数据
     */
    $$('.order-time-popup').on('open', function () {
        console.log('About Popup opened');
        var curDate = new Date();
        initCalendar(curDate);
        requestData(curDate.getFullYear(), curDate.getMonth())
    });

    /**
     * 关闭后移除DOM
     */
    $$('.order-time-popup').on('closed', function () {
        $$('#time-calendar-inline-container').find('.picker-calendar').remove();
    });

    $$('.order-order').on('open', function () {
        initSelectedDate();
    });

    $$('.order-order').on('closed', function () {
        $$('#date_btn_row').find('.time-button').remove();
    });
});

/**
 * 日期选择控件，默认选择明天，默认显示明天和后天
 */
function initSelectedDate() {
    var curDate = new Date();
    curDate.setDate(curDate.getDate() + 1);
    var date1 = curDate.getFullYear() + '-' + curDate.getMonth() + '-' + curDate.getDate();

    var button1 = ' <a value="' + date1 + '" class="button time-button active">' + curDate.getMonth() + '.' + curDate.getDate() + '</a>';
    $('#date_btn_row').prepend(button1);

    curDate.setDate(curDate.getDate() + 1);
    date1 = curDate.getFullYear() + '-' + curDate.getMonth() + '-' + curDate.getDate();
    var button2 = ' <a value="' + date1 + '" class="button time-button">' + curDate.getMonth() + '.' + curDate.getDate() + '</a>';
    $('#date_btn_row').prepend(button2);
    $$('#date_btn_row').find('.time-button').on('click', function () {
        initSelectedListener(this);
    });
}

/**
 * 初始化日期选择监听事件,点击时间的操作
 */
function initSelectedListener(click) {
    $$('#date_btn_row').find('.active').removeClass('active');
    $$(click).addClass('active');
    $$('#selected_date').val($$(click).attr('value'));
    console.log($$('#selected_date').val())
}


/**
 * 一次只能选择一个日期，选择之后关闭菜单，添加日期按钮
 * @param year
 * @param month
 * @param day
 */
function checkDate(year, month, day) {
    var date = year + '-' + month + '-' + day;
    myApp.closeModal('.order-time-popup');
    var clickBtn = $$('#selected_date_label');

    console.log('clickBtn: ', clickBtn);

    if (clickBtn.length === 0) {
        var button = ' <a id="selected_date_label"  value=\"' + date + '\" class="button time-button">' + month + '.' + day + '</a>';
        $('#date_btn_row').prepend(button);
        clickBtn = $$('#selected_date_label');
        clickBtn.on('click', function () {
            initSelectedListener(this);
        })
    } else {
        clickBtn.text(month + '.' + day);
        clickBtn.attr('value', date);
    }
    initSelectedListener(clickBtn);
}


/**
 * 初始化日历，如果已经存在，则这么办呢
 */
function initCalendar(currentDate, disable) {
    var monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
    var dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

    var calendarInline = myApp.calendar({
        container: '#time-calendar-inline-container',
        value: [currentDate],
        weekHeader: true,
        firstDay: 0,
        dayNames: dayNames,
        dayNamesShort: dayNames,
        weekendDays: [0, 6],
        disabled: disable,
        toolbarTemplate:
        '<div class="toolbar calendar-custom-toolbar" style="background-color: white">' +
        '<div class="toolbar-inner">' +
        '<div class="left">' +
        '<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
        '</div>' +
        '<div class="center"></div>' +
        '<div class="right">' +
        '<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
        '</div>' +
        '</div>' +
        '</div>',
        onOpen: function (p) {
            $$('.calendar-custom-toolbar .center').text(p.currentYear + '年' + monthNames[p.currentMonth]);
            $$('.calendar-custom-toolbar .left .link').on('click', function () {
                calendarInline.prevMonth();
            });
            $$('.calendar-custom-toolbar .right .link').on('click', function () {
                calendarInline.nextMonth();
            });
        },
        onMonthYearChangeStart: function (p) {
            $$('.calendar-custom-toolbar .center').text(p.currentYear + '年' + monthNames[p.currentMonth]);
            requestData(p.currentYear, p.currentMonth)

        },
        onDayClick: function (p, dayContainer, year, month, day) {
            checkDate(year, month, day)
        }
    });
}

/**
 * 向服务器请求数据,获取到数据之后重新初始化日历控件
 * @param year
 * @param month
 * @param calendar
 */
function requestData(year, month) {
    myApp.showIndicator();
    setTimeout(function () {
        $$('#time-calendar-inline-container').find('.picker-calendar').remove();
        initCalendar(new Date(year, month, 1), function (date) {
            return !(date.getDate() < 15 || date.getDate() > 25);
        });

        myApp.hideIndicator();
    }, 1000)
}


function topay() {
    mainView.router.loadPage('./goods/pay-page.html')
}


